<template>
  <el-form :model="form" label-width="70px" class="vitaeForm">
    <!-- 姓名 -->
    <el-form-item label="姓名">
      <el-input v-model="form.name" placeholder="您的姓名" />
    </el-form-item>

    <!-- 应聘岗位 -->
    <el-form-item label="应聘岗位">
      <el-input v-model="form.job_name" placeholder="您计划投递的岗位" />
    </el-form-item>

    <!-- 性别 -->
    <el-form-item label="性别">
      <el-radio-group v-model="form.sex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 出生日期 -->
    <el-form-item label="出生日期">
      <el-col>
        <el-date-picker width="100%" v-model="form.birth" type="date" placeholder="出生日期" style="width: 100%" />
      </el-col>
    </el-form-item>

    <!-- 籍贯 -->
    <el-form-item label="籍贯">
      <el-cascader style="width: 100%;" placeholder="您的籍贯所在地" v-model="form.address" :options="provinceAndCityData">
      </el-cascader>
    </el-form-item>

    <!-- 联系电话 -->
    <el-form-item label="联系电话">
      <el-input v-model="form.phone" placeholder="您的联系电话" />
    </el-form-item>

    <!-- 联系邮箱 -->
    <el-form-item label="联系邮箱">
      <el-input v-model="form.email" placeholder="您的联系邮箱" />
    </el-form-item>

    <!-- 技能描述 -->
    <el-form-item label="技能描述">
      <el-input v-model="form.job_skill" type="textarea" />
    </el-form-item>

    <!-- 工作经验 -->
    <el-form-item label="工作经验">
      <el-input v-model="form.work_experience" type="textarea" />
    </el-form-item>

    <!-- 提交按钮 -->
    <div class="submit">
      <el-button @click="postVitaeData" type="primary" round size="large">保存简历</el-button>
    </div>
  </el-form>
</template>

<script setup>
import {ref, watch, inject} from 'vue'
import {useRouter} from "vue-router";
import checkLoginStatus from "@/hooks/checkLoginStatus.js";
import login from "@/hooks/login.js";
import {provinceAndCityData} from 'element-china-area-data'
const $axios = inject("$axios")
const $root = inject("$root")
const router = useRouter()
const form = ref({
  name: "",                   //姓名
  job_name: "",               //应聘岗位
  sex: 1,                     //性别
  birth: "",                  //生日
  address: [],                //地址
  phone: "",                  //电话
  email: "",                  //邮箱
  job_skill: "",              //技能描述
  work_experience: "",        //工作经验
})
/**
 * 提交简历数据
 */
const postVitaeData = () => {
  const cid = router.currentRoute.value.params.id
  if (cid) {
    //编辑简历
    updateVitaeData(cid)

  } else {
    //新增简历
    addVitaeData()
  }
}
/**
 * //编辑简历
 * @param cid
 */
const updateVitaeData = (cid) => {
  $axios.post($root + `/curri/update/${cid}/`, form.value).then(res => {
    if (res.data.code == 200) {
      console.log(res)
      ElMessage({
        message: '简历编辑成功',
        type: 'success',
      })
    } else {
      ElMessage({
        message: '简历编辑失败',
        type: 'error',
      })
    }
  })

}
/**
 * 新增简历
 */
const addVitaeData = () => {
  form.value.address = form.value.address.join('-')
  $axios.post($root + `/curri/`, form.value).then(r => {
    if (r.data.code == 200) {
      console.log(r)
      ElMessage({
        message: '简历新增成功',
        type: 'success',

      })
    } else {
      ElMessage.error('简历新增失败')
    }
  })

}
/**
 * 获取简历详情
 */
const getVitaeDetail = () => {
  form.value = {}
  const cid = router.currentRoute.value.params.id
  if (cid) {
    $axios.get($root + `/curri/${cid}/`).then(res => {
      if (res.data.code == 200)
        console.log(res)
      form.value = res.data.data;
      //正则替换
      form.value.work_experience = form.value.work_experience.replace(/\\n/g, '\r')
      form.value.address = form.value.address.split("-")
    })
  }
}
watch(() => router.currentRoute.value.name, (name) => {
  if (name == "addvitae") {
    checkLoginStatus(getVitaeDetail, login)
  }
}, {immediate: true, deep: true})

</script>

<style scoped>
.vitaeForm {
  width: 85%;
  margin: 15px auto 0 auto;
}
</style>
